<template>
    <div>
        <h2>{{info.name}}</h2>
        <button @click="changeData">修改数据</button>
    </div>
</template>

<script>
    import { reactive, ref, watch } from 'vue';

    export default {
        setup() {   
            const info = reactive({name: 'leon', age: 18})
 
            // 1.侦听watch时传入getter函数
            // watch(() => info.name, (newValue, oldValue) => {
            //     console.log('newValue: ', newValue, 'oldValue: ', oldValue);
            // })
 
            // 2.传入一个可响应对象： reactive/ref对象 
            // reactive对象获取到的newValue和oldValue对象本身都是reactive对象
            // watch(info, (newValue, oldValue) => {
            //     console.log('newValue: ', newValue, 'oldValue: ', oldValue);
            // })

            // ref对象获取的newValue和oldValue是value值的本身
            const name = ref('leon');

            // watch(name, (newValue, oldValue) => {
            //     console.log('newValue: ', newValue, 'oldValue: ', oldValue);
            // })

            // 如果希望newValue和oldValue是一个普通的对象
            watch(() => {
                return {...info}
            }, (newValue, oldValue) => {
                console.log('newValue: ', newValue, 'oldValue: ', oldValue);
            })
    
            const changeData = () => {
                // info.name = 'why';
                // name.value = 'kobe';
                info.name = 'coder';
            }

            return {
                changeData,
                info
            }
        }
    }
</script>

<style scoped>

</style>